    <!-- 企业项目 -->
<template>
  <div class="enterpriseProjects">
    <div class="top-box">
      <div class="item" v-for="(i, k) in topList" :key="k">
        <div class="label">{{ i.label }}</div>
        <div class="value">
          <span class="val2">
            <CountTo :startVal="0" :endVal="i.value" :duration="1000"
          /></span>
          <span class="unit2"> {{ i.unit }}</span>
        </div>
      </div>
    </div>
    <div class="second-title">重点企业</div>
    <div class="table">
      <div class="table-header">
        <div
          class="header-item"
          v-for="(i, k) in tableConfig"
          :key="k"
          :style="` width: ${i.width} `"
        >
          <div class="label">{{ i.label }}</div>
        </div>
      </div>
      <div class="list">
        <div class="data" v-for="(i, k) in tableData" :key="k">
          <div class="item" style="width: 20%">{{ k + 1 }}</div>
          <div class="item" style="width: 60%">{{ i.name }}</div>
          <div class="item" style="width: 20%">{{ i.num }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      topList: [
        {
          label: '拟开工项目',
          value: '568',
          unit: '个'
        },
        {
          label: '在建类项目',
          value: '568',
          unit: '个'
        },
        {
          label: '拟投产项目',
          value: '568',
          unit: '个'
        },
        {
          label: '技术改造项目',
          value: '568',
          unit: '个'
        }
      ],
      tableConfig: [
        {
          label: '序号',
          width: '20%',
          prop: ''
        },
        {
          label: '名称',
          width: '60%',
          prop: ''
        },
        {
          label: '单位(家)',
          width: '20%',
          prop: ''
        }
      ],
      tableData: [
        {
          name: '山东省各地市500强企业',
          num: '109'
        },
        {
          name: '山东省各地市500强企业',
          num: '109'
        },
        {
          name: '山东省各地市500强企业',
          num: '109'
        }
      ]
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.enterpriseProjects {
  .top-box {
    display: flex;
    gap: 8px;
    .item {
      flex: 1;
      height: 53px;
      background: rgba(43, 101, 156, 0.36);
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #2b659c;

      .label {
        height: 50%;
        font-family: MicrosoftYaHeiUI;
        font-size: 16px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .value {
        height: 50%;
        background: url('~@/assets/industrialOperation/cobwebbing.png') center
          center/cover;
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
          width: 14px;
          height: 18px;
        }
        .val {
          font-family: MicrosoftYaHeiUI;
          font-size: 16px;
          color: red;
          font-weight: bold;
        }
        .unit {
          font-family: MicrosoftYaHeiUI;
          font-size: 14px;
          color: red;
        }
        .val2 {
          font-family: MicrosoftYaHeiUI;
          font-size: 16px;
          color: #fff;
          font-weight: bold;
        }
        .unit2 {
          font-family: MicrosoftYaHeiUI;
          font-size: 16px;
          color: #fff;
          font-size: 14px;
        }
      }
    }
  }
  .second-title {
    width: 100%;
    height: 31px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-family: MicrosoftYaHeiUI;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    margin-top: 14px;
    background: url('~@/assets/industrialOperation/second-title.png') center
      center/cover;
  }
  .table {
    display: flex;
    flex-direction: column;
    height: calc(100% - 75px);
    .table-header {
      height: 45px;
      display: flex;
      align-items: center;
      margin-top: 10px;
      box-sizing: border-box;
      background-color: rgba(17, 53, 94, 0.7);
      border-bottom: 2px solid #548fda;
      .header-item {
        font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        .label {
          text-align: center;
        }
      }
    }
    .list {
      overflow: auto;
      padding: 0 5px;
      .data {
        display: flex;
        height: 47px;
        line-height: 47px;
        border: none;
        background-color: rgba(17, 53, 94, 0.36);
        position: relative;
        margin-top: 7px;
        box-sizing: border-box;

        &:after {
          content: '';
          width: 2px;
          height: 16px;
          background: #27b0f7;
          position: absolute;
          top: 15px;
          left: 0;
        }
        &::before {
          content: '';
          width: 2px;
          height: 16px;
          background: #27b0f7;
          position: absolute;
          top: 15px;
          right: 0;
        }
        .item {
          text-align: center;
          font-family: MicrosoftYaHeiUI;
          font-size: 16px;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
